<template name="appBody">
  <div class="wrapper-welcome">
    <div class="title-welcome">Local Market</div>
    <div class="description-welcome">Local Market was made by <a href="http://percolatestudio.com" target="_blank" class="js-open">Percolate Studio</a> as an example of a cross platform mobile app built in <a href="https://www.meteor.com" target="_blank" class="js-open">Meteor</a>. The entire app is less than 1,000 lines of JavaScript. View the source on <a href="https://github.com/meteor/meteor/tree/devel/examples/localmarket" target="_blank" class="js-open">GitHub</a>.
    </div>
    
    <div class="description-welcome">
    The app is designed to run on a physical device, where it uses the hardware's native camera and GPS support.
    </div>

    <div class="description-welcome">
    You can also run it in a simulator, or in a desktop browser as a convenience (what you're looking at right now).
    </div>

    <div class="description-welcome">
    This app includes a simple administrative backend that you can use to set welcome text on the app's home screen. Visit <a href="{{pathFor 'admin'}}">/admin</a> to log into the backend. The first authenticated user is allowed access.
    </div>
  </div>

  <div id="container" class="{{menuOpen}} {{overlayOpen}}">
    <section id="menu" class="overthrow">
      <a href="{{pathFor 'home'}}" class="{{activePage 'home'}}">
        <span class="wrapper-menu-item">
          <span class="icon-home"></span>
          <span class="title-menu">Home</span>
        </span>
      </a>
      <a href="{{pathFor 'feed'}}" class="{{activePage 'feed'}}">
        <span class="wrapper-menu-item">
          <span class="icon-rss"></span>
          <span class="title-menu">What's<br>Cooking</span>
        </span>
      </a>
      <a href="{{pathFor 'recipes'}}" class="{{activePage 'recipes' 'recipe'}}">
        <span class="wrapper-menu-item">
          <span class="icon-category"></span>
          <span class="title-menu">Recipes</span>
        </span>
      </a>
      <a href="{{pathFor 'bookmarks'}}" class="{{activePage 'bookmarks'}}">
        <span class="wrapper-menu-item">
          <span class="icon-bookmark-hollow"></span>
          <span class="title-menu">Bookmarks</span>
        </span>
      </a>
      <a href="{{pathFor 'about'}}" class="{{activePage 'about'}}">
        <span class="wrapper-menu-item">
          <span class="icon-question"></span>
          <span class="title-menu">About</span>
        </span>
      </a>
    </section>

      <div class="notifications">
        {{#unless connected}}
          <div class="notification">
            <span class="icon-sync"></span>
            <div class="title-notification">Trying to connect</div>
          </div>
        {{/unless}}
        {{#each notifications}}
          <div class="notification">
            <a class="btn-primary js-notification-action">{{action}}</a>
            <div class="title-notification">{{title}}</div>
          </div>
        {{/each}}
      </div>

    {{> overlay}}

    <div class="content-overlay"></div>

    <div id="content-container">
      {{> yield}}
    </div>

  </div>
</template>